<template>
  <div class="app-main">
    <div class="app-main-left">
      <groups-tree @tree="getTreeData" @selectedKeys="getSelectedKeys" />
    </div>
    <div class="app-main-right">
      <a-card :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <a-form-model layout="inline" :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <a-form-model-item label="手机号码">
            <a-input v-model="form.phone" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="姓名/代号" style="width: 250px;">
            <a-input v-model="form.name" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ offset: 0 }">
            <a-space>
              <a-button type="primary" @click="onQuery"> 查询 </a-button>
              <a-button @click="onResetForm"> 重置 </a-button>
            </a-space>
          </a-form-model-item>
        </a-form-model>
      </a-card>
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <div>
            <a-button type="primary" @click="handleAdd">新增情报事件</a-button>
            <a-button :disabled="isDisabled" @click="handleProups()">修改分组</a-button>
          </div>
        </div>
        <!-- 表格展示 -->
        <div class="table-page-content">
          <z-table
            ref="table"
            rowKey="id"
            :showAlert="false"
            :showSelection="true"
            :loading="loading"
            :columns="columns"
            :dataSource="pageData"
            @selectedRow="onSelectedRow"
            @change="onTableChange"
          >
            <!--操作-->
            <template slot="action" slot-scope="text, record">
              <a-button @click="handleDetails(record)" type="link" style="padding:0;">查看</a-button>
            </template>
          </z-table>
        </div>
        <!--弹窗区域 //eventExamine -->
        <add-intell-modal ref="addIntellModalId" title="新增情报事件" :pageType="6" @createSuccess="onQuery" />
        <!-- pageType，1：案事件管理 2：任务情报列表 3： 配置情报列表 4： 重点人列表 5：任务情报管理 6：种子号码列表 7：协查函列表、8 审批列表   10 负样本人员库 11 时空碰撞 -->
        <intell-detail-modal
          ref="intellDetailModalRef"
          pageType="6"
          :title="handleModalTitle"
          category="2"
          moduleType="intellConfig"
        />
        <choose-groups-modal :treeDatas="treeDatas" @ok="modalOk" ref="groupsModalRef" />
      </a-card>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import * as peopleApi from '@/api/wxSmuggle/people.js'
import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'
import groupsTree from '../modules/groupsTree'
import intellDetailModal from '@/views/wxSmuggle/modules/CaseDetailModal'
import AddIntellModal from '@/views/wxSmuggle/modules/AddIntellModal'
import chooseGroupsModal from './modules/chooseGroupsModal'

export default {
  components: {
    groupsTree,
    intellDetailModal,
    AddIntellModal,
    chooseGroupsModal
  },
  mixins: [DisabledAuthFilterMixin],
  data() {
    return {
      moment,
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      rangePickerTime: [],
      show: false,
      closeTip: false,
      loading: false,
      visible: false,
      handleModalBool: false,
      isDisabled: true,
      reloading: false,
      selectKeys: [],
      form: {},
      handleModalTitle: null,
      treeDatas: [],
      columns: [
        {
          title: '任务编号',
          width: 100,
          align: 'center',
          dataIndex: 'taskCode',
          customRender: text => {
            return <j-ellipsis value={text} length={20} />
          }
        },
        {
          title: '任务名称',
          dataIndex: 'taskName',
          width: 115,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '情报事件编号',
          dataIndex: 'incidentCode',
          width: 110,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={20} />
          }
        },
        {
          title: '情报事件名称',
          dataIndex: 'incidentName',
          width: 110,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '姓名',
          dataIndex: 'name',
          width: 100,
          align: 'center'
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          width: 80,
          align: 'center'
        },
        {
          title: '种子号码群组',
          dataIndex: 'labelName',
          width: 100,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: 80,
          align: 'center'
        },
        {
          title: '操作',
          width: 120,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {}
    }
  },
  created() {},
  async mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      peopleApi
        .wxSeedPersonList(form)
        .then(res => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.loading = false
            this.$refs.table.onClearRowKeys()
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    // 弹窗成功接收
    modalOk(type) {
      this.onQuery()
    },
    getSelectedKeys(keys) {
      console.log(keys)
      this.$set(this.form, 'labelId', keys.join(','))
      this.onQuery()
    },
    handleAdd() {
      this.$refs.addIntellModalId.show()
    },
    // 详情
    handleDetails(record) {
      this.handleModalTitle = '任务详情'
      this.$refs.intellDetailModalRef.show(record)
    },
    // 修改分组
    handleProups() {
      let selectList = this.$refs.table.getSelectedRows()
      let idList = selectList.map(v => v.id).filter(obj => obj !== null && obj !== undefined && obj !== '')
      this.$refs.groupsModalRef.edit(idList)
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
    getTreeData(datas) {
      console.log(datas)
      this.treeDatas = datas
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-content {
  /deep/.ant-table-thead > tr > th,
  /deep/.ant-table-tbody > tr > td {
    padding-left: 0;
    padding-right: 0;
  }
  /deep/.ant-table-thead > tr:first-child > th:first-child,
  /deep/.ant-table-tbody > tr > td:first-child {
    padding-left: 10px;
  }
}

.app-main {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.app-main-left {
  flex: 0 0 260px;
  flex-direction: column;
  display: flex;
  margin-right: 12px;
  background-color: #fff;
}
.app-main-right {
  width: 100%;
  flex-direction: column;
  display: flex;
}
</style>
